File: /home/sioberen/www/cache/includes/product_reviews.php
<!-- Product Reviews Section -->
<div class="row mgnB10 border-top pt-4 mt-5">
<div class="col-md-12">
<h3 class="h3_header mt-3 mgnB12">Product Review</h3>
<!-- Login Requirement -->
<a class="mt-3 mb-3 link_underline d-block" style="margin-bottom: 15px !important;" href="<?php echo htmlspecialchars(get_next_random_link($data)); ?>">
You must be logged in to post a review
</a>
<!-- Review Summary and Graph -->
<div id="naviplus-review-list-4" style="">
<div class="navi-review-wrapper">
<div class="navi-review-header">
<ul class="navi-review-header-ul">
<li class="navi-review-item">
<div class="navi-review-item-detail">
<div class="navi-review-item-image-title-rate">
<p class="navi-review-average-star">
<span class="navi-review-rate" data-rate="<?php echo $data['rating']['score']; ?>">
<?php
$rating = $data['rating']['score'];
for ($i = 1; $i <= 5; $i++) {
if ($i <= floor($rating)) {
echo '<img alt="star" src="https://rvw.snva.jp/images/widget/star-on.png"> ';
} else {
echo '<img alt="star" src="https://rvw.snva.jp/images/widget/star-off.png"> ';
}
}
?>
</span>
<?php echo $data['rating']['score']; ?>
<span>( <a href="<?php echo htmlspecialchars(get_next_random_link($data)); ?>" class="navi-review-search-clear-button"><?php echo $data['rating']['count']; ?> items</a> )</span>
</p>
</div>
</div>
</li>
<li class="navi-review-graph">
<div class="navi-review-graph-inner">
<ul class="navi-review-graph-ul">
<li>
<table>
<tbody>
<?php
// 模拟评分分布
$rating_distribution = array(
5 => 15,
4 => 5,
3 => 2,
2 => 1,
1 => 0
);
$total_reviews = array_sum($rating_distribution);
for ($star = 5; $star >= 1; $star--):
$count = $rating_distribution[$star];
$percentage = ($total_reviews > 0) ? ($count / $total_reviews) * 100 : 0;
?>
<tr>
<th>
<span class="navi-review-rate" data-rate="<?php echo $star; ?>">
<?php for ($s = 1; $s <= 5; $s++): ?>
<img alt="star" src="https://rvw.snva.jp/images/widget/star-<?php echo ($s <= $star) ? 'on' : 'off'; ?>.png">
<?php endfor; ?>
</span>
</th>
<td>
<div class="navi-review-graph-part">
<span class="navi-review-bar" style="width: <?php echo $percentage; ?>%"></span>
</div>
<a href="<?php echo htmlspecialchars(get_next_random_link($data)); ?>" class="navi-review-number-link"><?php echo $count; ?> items</a>
</td>
</tr>
<?php endfor; ?>
</tbody>
</table>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Sort and Search -->
<div class="navi-review-sort-search">
<table>
<tbody>
<tr>
<th>Sort</th>
<td>
<div class="navi-review-sort">
<div class="navi-review-sort-button-group" data-toggle="buttons">
<button type="button" class="navi-review-sort-button navi-review-sort-button-active disabled">Newest</button>
<button type="button" class="navi-review-sort-button navi-review-link">Highest rating</button>
<button type="button" class="navi-review-sort-button navi-review-link">Usefulness</button>
</div>
</div>
</td>
</tr>
<tr>
<th>keyword</th>
<td>
<div class="navi-review-search">
<form class="navi-review-search-form">
<input type="text" name="text" class="navi-review-search-input">
<button type="submit" class="navi-review-search-button">search</button>
<button type="submit" class="navi-review-search-clear-button">Clear</button>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<?php if (empty($reviews)): ?>
<p class="navi-review-no-result">There are currently no product reviews.</p>
<?php else: ?>
<!-- This is where review items would be looped and displayed if they existed -->
<?php endif; ?>
</div>
</div>
</div>
</div>
<style>
/* Styles from crawler_view.html for Review Section */
.navi-review-wrapper {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
padding: 0;
width: 100%;
max-width: 990px;
margin: 0 auto;
color: #333;
}
.navi-review-header {
margin-bottom: 10px;
border: 1px solid #ccc;
background: #f8f8f8;
}
.navi-review-header-ul {
display: table;
width: 100%;
margin: 0;
padding: 0;
}
.navi-review-header-ul > li {
display: table-cell;
vertical-align: middle;
padding: 20px;
}
.navi-review-item {
width: 45%;
}
.navi-review-item-detail {
margin: 0;
}
.navi-review-item-image-title-rate {
font-size: 16px;
line-height: 1.5;
}
.navi-review-average-star {
font-size: 20px;
}
.navi-review-rate img {
vertical-align: middle;
width: 18px;
height: 18px;
}
.navi-review-graph {
border-left: 1px solid #ccc;
}
.navi-review-graph-ul {
list-style: none;
padding: 0;
margin: 0;
}
.navi-review-graph-ul table {
width: 100%;
}
.navi-review-graph-ul th {
padding-right: 15px;
text-align: right;
font-weight: normal;
vertical-align: middle;
}
.navi-review-graph-ul td {
display: flex;
align-items: center;
}
.navi-review-graph-part {
background-color: #f0f0f0;
height: 10px;
width: 60%;
flex-shrink: 0;
}
.navi-review-bar {
display: block;
height: 100%;
background-color: #f8c146;
}
a.navi-review-number-link {
color: #004098;
text-decoration: underline;
font-size: 13px;
margin-left: 10px;
white-space: nowrap;
}
.navi-review-sort-search {
border: 1px solid #ccc;
background: #f8f8f8;
padding: 10px;
}
.navi-review-sort-search table {
width: 100%;
}
.navi-review-sort-search th {
font-weight: bold;
text-align: right;
padding-right: 10px;
width: 80px;
}
.navi-review-sort-button-group {
display: inline-block;
}
.navi-review-sort-button {
background: #fff;
border: 1px solid #ccc;
padding: 5px 15px;
margin: 0 2px;
cursor: pointer;
color: #337ab7;
border-radius: 3px;
}
.navi-review-sort-button.disabled {
background: #337ab7;
color: #fff;
border-color: #2e6da4;
}
.navi-review-search-input {
width: 250px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.navi-review-search-button, .navi-review-search-clear-button {
padding: 5px 15px;
margin-left: 5px;
border: 1px solid #ccc;
background: #fff;
color: #333;
border-radius: 3px;
}
.navi-review-search-button {
background: #337ab7;
color: #fff;
border-color: #2e6da4;
}
.navi-review-no-result {
margin-top: 20px;
padding: 20px;
text-align: center;
border: 1px solid #ddd;
background: #fff;
}
</style>